<template>
	<view class="page">

		<image class="main_top" src="/static/main_bottom.png" mode="widthFix">
		</image>
		<image class="logo" src="/static/main.png" mode="widthFix"></image>
		<!-- <image class="bottom" src="/static/main_bottom.png" mode="widthFix"></image> -->
		<view class="page2">
			<view class="top">
				<span>{{title}}</span>

				<view class="input">
					<uni-easyinput type="textarea" autoHeight v-model="question" :placeholder="placeholder"
						:styles="styles"></uni-easyinput>
				</view>

			</view>

			<view class="content">
				<image class="l" src="/static/top_r.png" mode="widthFix"></image>
				<image class="r" src="/static/top_r.png" mode="widthFix"></image>
				<image class="b_l" src="/static/top_r.png" mode="widthFix"></image>
				<image class="b_r" src="/static/top_r.png" mode="widthFix"></image>

				<button v-if="!message || message.length == 0" class="bt" @click="initData">{{bt}}</button>
				<span class="message" v-if="message && message.length > 0">{{message}}</span>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				question: "",
				message: "",
				type: "",
				title: "",
				placeholder: "",
				bt: "",
				ask: "",
				styles: {
					color: '#e8c576',
					borderColor: '#e8c576'
				}
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.title
			});
			this.type = options.type;
			if (this.type == "xzds") {
				this.title = "陌生人，请告诉我你的星座，我将为你解答～";
				this.placeholder = "请告诉我你的星座，我将为你解答～";
				this.bt = "星座解析"

			} else if (this.type == "jmds") {
				this.title = "陌生人，请描述你的梦境吧！我将为你解答～";
				this.placeholder = "请描述你的梦境吧！我将为你解答～"
				this.bt = "解梦"
			} else if (this.type == "smds") {
				this.title = "陌生人，告诉我，你想知道什么？";
				this.placeholder = "告诉我，你想知道什么？格式最好是：出生日期：20240415，我想知道的事情是：xxx"
				this.bt = "算命"
			}
			// if(this.title) {
			// 	this.initData()
			// }

		},
		mounted() {

		},
		methods: {
			initData() {
				if (this.question.length == 0) {
					uni.showModal({
						title: "请补充内容",
						showCancel: false,
						confirmText: "好的"
					});
					return;
				}
				var ask = "";
				this.$api.request({
					url: 'thirdApp/msgcheck?appid=tt0782713f98b354f501',
					method: 'POST',
					data: {
						content: this.question
					}
				}).then(res => {
					if (res.code == 200) {
						if (this.type == "xzds") {
							this.ask =
								`我想让你扮演一个占星家。 您将了解十二生肖及其含义，了解行星位置及其对人类生活的影响，能够准确解读星座运势，并与寻求指导或建议的人分享您的见解。 你的回答应该是中文且不超过120字。现在请为我解答：'${this.question}'`

						} else if (this.type == "jmds") {
							this.ask =
								`我要你充当解梦师。 我会给你描述我的梦，你会根据梦中出现的符号和主题提供解释。 不要提供关于梦者的个人意见或假设。 仅根据所提供的信息提供事实解释。 你的回答应该是中文且不超过120字。 下面是我的梦境：‘${this.question}’`
						} else if (this.type == "smds") {
							this.ask =
								`我想让你扮演算命先生的角色。 了解民间传说中的天命、家命及其含义，了解生八字及其对人生的影响，并能根据生八字准确分析人格。 出生和投射人一生的方向。所有输出应为中文且不超过120字。下面是我提供的信息：‘${this.question}’`
						}
						var t = new Date().format("yyyy-MM-dd")
						var count = uni.getStorageSync("count_" + t);
						if (!count) {
							count = 2;
						}
						if (count <= 0) {
							uni.showModal({
								title: '次数已经用尽，请明天再来！',
								showCancel: false,
								confirmText: "知道了"

							});
							return;
						}

						uni.showLoading({
							title: "正在为你解答"
						})
						if (this.ask && this.ask.length > 0) {
							uniCloud.callFunction({
								name: 'ai',
								data: {
									content: this.ask
								}
							}).then(res => {
								console.log(JSON.stringify(res));
								this.message = res.result.reply
								uni.hideLoading();
								var c = parseInt(count) - 1;
								uni.setStorageSync("count_" + t, c + "")
							});
						}
					} else {
						uni.showModal({
							title: "提示",
							content: res.msg,
							showCancel: false,
							confirmText: "知道了"
						})
					}
				})


			}
		}
	}
	Date.prototype.format = function(fmt) {
		var o = {
			"M+": this.getMonth() + 1, //月份
			"d+": this.getDate(), //日
			"h+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			"S": this.getMilliseconds() //毫秒
		};
		if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		for (var k in o)
			if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((
				"00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	}
</script>

<style lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		background-color: #202730;

		position: relative;

	}

	.main_top {
		width: 100%;
		animation: rotate 2s linear infinite;
	}

	.logo {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		animation: flicker 2s infinite;
	}

	@keyframes flicker {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.7;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
			/* 从0度开始旋转 */
		}

		to {
			transform: rotate(360deg);
			/* 旋转一周，即360度 */
		}
	}

	.bottom {
		width: 50%;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9999;
		// animation: flicker 2s infinite;
		animation: rotate 2s linear infinite;
		/* 定义动画 */
		opacity: 0.5;
	}


	.page2 {
		width: 100vw;
		height: 100vh;
		background-color: #202730;
		opacity: 0.7;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.top {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: #e8c576;
		font-size: 12px;
		margin-top: 50px;
		margin-bottom: 20px;

		span {
			margin-top: 10px;
			animation: flicker 2s infinite;
		}

		.input {
			width: 80%;
			margin-top: 10px;
			background: #202730;
			color: #e8c576;
			font-size: 18px;
		}
	}

	.content {
		background-color: #000000;
		width: 90%;
		height: 70%;
		position: relative;

		.myCanvas {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 9999;
		}

		.bt {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 40%;
			background-color: #e8c576;
			color: white;
		}

		.r {
			width: 40%;
			position: absolute;
			right: 0;
			top: 0;
		}

		.l {
			width: 40%;
			position: absolute;
			left: 0;
			top: 0;
			transform: scaleX(-1);
		}

		.b_r {
			width: 40%;
			position: absolute;
			right: 0;
			bottom: 0;
			transform: scaleY(-1);
		}

		.b_l {
			width: 40%;
			position: absolute;
			left: 0;
			bottom: 0;
			transform: scale(-1, -1);

		}

		@keyframes typing {
			0% {
				opacity: 0;
			}

			20% {
				opacity: 1;
			}
		}

		.message {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 80%;
			display: inline-block;
			overflow: hidden;
			// white-space: nowrap;
			text-align: center;
			font-size: 24px;
			color: #e8c576;
			animation: typing 2s steps(20);
		}
	}
</style>